<template>
    <view class="content">
        <view class="main">
            <scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh;" :scroll-top="scrollTop"
                ref="myScrollView" show-scrollbar="false">
                <!-- 这里是页面其他内容 -->
                <view class="content-top fixed_top" :style="bgOpacity" id="content_top" :class="{ fixed_top: scrolling }">
                    <van-nav-bar left-arrow @click-left="onClickLeft" id="navBar" :title="scrolling ? navBarTitle :''"> </van-nav-bar>
                    <!-- <view class="tabBox" :class="{ top_display: !scrolling }" id="tabBox" :style="scrollMT">
                        <view class="tabs white">
                            <view class="tabbar-item tab-item" v-for="(ite, index) in tabBarList"
                                @click="changeTab(index, $event, ite.typeName)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ ite.typeName }}
                            </view>
                        </view>
                    </view> -->

                </view>
                <view class="main-container" ref="container"
                    :class="{ 'element_to_animate': isAnimated,'animate_class': isAnimated, }">
                    <!-- 商品图片  五张轮播 -->
                    <view class="goodsImg" ref="goodsImg">
                        <img :src="merchantInfo.imgUrl" alt="">
                        <!-- <swiper class="top_swiper" autoplay="false" :indicator-dots="false"
                            indicator-active-color="#FFFFFF" :indicator-width="20" ref="webpage"
                            :current="currentSwiper" @change="changeSwiper($event)">
                            <swiper-item v-for="(swiper_item, s) in sliderImageList" :id="s" :key="s">
                                <img :src="swiper_item" alt="">
                            </swiper-item>
                        </swiper> -->
                        <!-- 数字五张 -->
                        <!-- <view class="swiper_item_num">{{ currentSwiperItem + 1 }} / {{ sliderImageList.length }}</view> -->
                    </view>
                    <!-- 商品信息 -->
                    <view class="pageInfo_top">
                        <view class="goods_content" id="goods_content">
                            <view class="goodsPics">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/merchant/environmentPic1.png"
                                    alt="" mode="widthFix">
                            </view>
                            <view class="goodsInfo">
                                <view class="goodsInfo_name">{{merchantInfo.merchantName}}</view>
                                <view class="goodsInfo_isSelfPoint" v-if="merchantInfo.isSelfPickup==1">自提点</view>
                            </view>
                        </view>
                        <view class="merchant_address_box mt48" >
                            <view class="content_title infoTitle">所属小区</view>
                            <view class="merchant_address"> {{merchantInfo.address}} </view>

                        </view>
                    </view> 
                    <!-- 商家信息 -->
                    <view class="merchantInfo mt48">
                        <view class="infoTitle">商家信息</view>
                        <view class="infoWrapper">
                            <view class="address info"> <van-icon name="location-o" style="margin-right: 26rpx;" />
                                {{merchantInfo.mapAddress}}</view>
                            <view class="phone info" v-if="merchantInfo.contactPhone"><van-icon name="phone-o" style="margin-right: 26rpx;" />{{merchantInfo.contactPhone}}</view>
                            <view class="businessHours info"><van-icon name="clock-o" style="margin-right: 26rpx;" /><span class="sj_status" style="margin-right: 10rpx;">{{ merchantInfo.openBusiness?'营业中':'休息中'  }} </span><span v-if="merchantInfo.openBusiness">{{merchantInfo.businessHours}}</span></view>
                            <view class="merchantCategory info" v-if="merchantInfo.scopeNameList && merchantInfo.scopeNameList.length>0"><van-icon name="shop-o"
                                    style="margin-right: 26rpx;" />商家品类：
                                    <span v-for="(scopeName,index) in merchantInfo.scopeNameList" :key="index">
                                        <span>{{scopeName}} <span v-if="index!==( merchantInfo.scopeNameList.length - 1)">、</span> </span>
                                    </span>
                            </view>
                        </view>
                    </view>
                    <view class="instoreEnvironment" v-if="merchantInfo.storeEnvImage && merchantInfo.storeEnvImageList.length>0">
                        <view class="infoTitle">店内环境</view>
                        <view class="environmentPics_box">
                            <!--<view class="fixDiv"></view> -->
                            <scroll-view class="top-menu-view environmentPics_content" scroll-x="true"
                                show-scrollbar="false"
                                :class="(swiperCurrent + 1) === merchantInfo.storeEnvImageList.length ? 'last-top-menu-view' : ''"
                                :scroll-into-view="tabCurrent" :scroll-with-animation="true">
                                <view class="merchantPicItem" v-for="(itemH, indexH) in merchantInfo.storeEnvImageList"
                                    :id="'tabNum' + (indexH + 1)" :key="indexH">
                                    <view class="renqi_img"> <img :src="itemH" alt="" style="width: 202rpx; height: 202rpx;"> </view>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                    <view class="merchant_services" v-if=" merchantInfo.storeDesc &&  merchantInfo.storeDesc!==''">
                        <view class="infoTitle">商家服务</view>
                        <view class="services_content">
                            <view class="contentInfo">{{ merchantInfo.storeDesc}}</view>
                            <!-- <view class="contentInfo">保养服务：大保养、小保养、换机油机滤、维修服务、四轮换位、动平衡 </view>
                            <view class="contentInfo">美容服务：汽车打蜡、改装服务、轮毂改装</view> -->
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>


    </view>
</template>

<script>
import { topStyleWhite, topStyleBlack } from '@/utils/topColor'

import Toast from '@/wxcomponents/vant/toast/toast'
import { formattedDate, formatDateSE,formatOnlyDate } from '@/utils/timeUtils' // 根据实际路径引入工具函数
import { getMerchantDetailApi } from '@/api/business'

export default {
    components: {
    },
    data () {
        return {
            navBarTitle: '小拇指汽修',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            scrollMT: '',
            scrollView: '',
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            listTop: 0,
            detailTop: 0,
            value1: 0,
            value2: 'a',
            currentIndex: 0, // 滚动时页面顶部出现的Tab
            isTruncated: true, // 商品标题显示
            lineClamp: 2,
            couponShow: false, // 优惠券弹窗
            xiajia: false,
            isShouQing: false,
            showSpecsPopup: false, // 规格弹窗
            buttonStatus: 0, // 点击加入购物车 或者 立即购买  传入的按钮内容标志
            removePopup: false, // 下架商品弹窗
            currentSwiperItem: 0, // 页面最顶部 商品图片轮播图 当前页面
            tabBarList: [
                {
                    typeId: 0,
                    typeName: '商品'
                },
                {
                    typeId: 1,
                    typeName: '评价'
                },
                {
                    typeId: 2,
                    typeName: '详情'
                }
            ],
            sliderImageList: [
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/merchant/merchantInfoBg.png', 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/merchant/merchantInfoBg.png'
            ],
            merchantInfo:{
                address:'盐湖区经济开发区水岸华庭东郡西门往西100米',
                phone:'15236235647',
                businessHours:'周一至周日 08:30-19:00',
                merchantCategory:'汽车维修'
            },
            // 用户评价
            swiperCurrent: 0,
            tabCurrent: 'tabNum1',
            merchantPics:['https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/merchant/environmentPic1.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/merchant/environmentPic2.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/merchant/environmentPic1.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'],
   

            params:{},
            parentSign: 'detail',
            tabHeight: 118,
            navHeight: uni.getStorageSync('navHeight'), // 顶部导航栏的高度
            productId: undefined,
            contentImage: ['https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/goodsPic.png'], // 商品详情图
            
            ebStoreProduct: {},
            specsList:[],  //规格列表
            specsPriceList:[],   //规格对应的价格
            ebStoreProductAttrRelationDTO:[],  //规格
            selectSuk:'',
            isAnimated: false,
            isAnimatedJudge:false,
            isAnimatedDetail:false,   //点击滑动到当前位置  加动画效果
            startTime: 1640707200000, // 给定的起始时间戳，示例值，可替换
            stopTime: 1797662617000, // 给定的结束时间戳，示例值，可替换
            timeDifference: '', // 存储时间差的字符串表示
            remainingTime: '', // 存储剩余时间的字符串表示
            timer: null, // 定时器引用，用于实时更新剩余时间
            days:null,
            hours:null,
            minutes:null,
            seconds:null,
            joinPeopleNum:0,
            productReplyNum:0,
            showGBpopup:false,  //显示拼团弹窗
            cartListLength:[], //购物列表
            merchantId:'1925757211795849218', //商家id

        }
    },
    onShareAppMessage(){
        return{
            title:'快来看看这款商品',
            path:'/pages/shangcheng/goodsDetail?id='+this.productId
        }
    },
    computed: {
        // filteredJudgeArray() {
        //     return this.userJudgeData.filter(item =>  item.pics &&item.pics!==null && item.pics.length>0);
        // }
    },
    onLoad (data) {
        const query = uni.createSelectorQuery().in(this)
        setTimeout(() => {
            // query.select('.van-goods-action').boundingClientRect(data => {
            //     console.log(data, 'data.top--00000')// 这个就是距离顶部的高度
            //     // this.detailTop = data.top // 赋值，待会要用
            // }).exec()
        }, 200)

        // 取到路由携带的参数
        if (data != null) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('params', this.params)

            this.merchantId = this.params?.merchantId || ''
         
        }
    },
    onReady () {
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })
        // const query = uni.createSelectorQuery().in(this)
        // // 需要给评论区域设置一个id标识，在这里是demo
        // query.select('#judge_box').boundingClientRect(data => {
        //     console.log(data, data.top, 'data.top')// 这个就是距离顶部的高度
        //     this.listTop = data.top // 赋值，待会要用
        // }).exec()

        // // //需要给商品详情区域设置一个id标识，在这里是demo
        // query.select('#goodsDetail').boundingClientRect(data => {
        //     console.log(data.top, 'data.top--')// 这个就是距离顶部的高度
        //     this.detailTop = data.top // 赋值，待会要用
        // }).exec()

    },
    onShow(){
        this.getMerchantDetailMethod()
    },
    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁前清除定时器，防止内存泄漏
    },
    methods: {
        formatDate(timestamp) {
            const date = new Date(timestamp);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        calculateTimeDifference() {
            const start = new Date(this.startTime);
            const stop = new Date(this.stopTime);
            const diff = stop - start;
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            this.timeDifference = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
        },
        calculateRemainingTime() {
            // const now = new Date();
            // console.log(now,'now')
            // if (now >= new Date(this.stopTime)) {
            //     this.remainingTime = '已结束';
            //     clearInterval(this.timer);
            //     return;
            // }
            const now = new Date().getTime();
            // console.log(now,'now')
            if(now < this.startTime){
                this.remainingTime = '未开始';
                clearInterval(this.timer);
                return;
            }
            if (now >= this.stopTime) {
                this.remainingTime = '已结束';
                clearInterval(this.timer);
                return;
            }
            const diff = new Date(this.stopTime) - now;
            this.days = Math.floor(diff / (1000 * 60 * 60 * 24));
            this.hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            this.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            this.seconds = Math.floor((diff % (1000 * 60)) / 1000);
            this.remainingTime = `${this.days}天 ${this.hours}小时 ${this.minutes}分钟 ${this.seconds}秒`;
        },

        handleScroll (e) {
            console.log('顶部滚动距离', e.detail.scrollTop)
            this.old.scrollTop = e.detail.scrollTop

            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
                // this.scrollMT = 'margin-top: 486px'
                // const query = uni.createSelectorQuery().in(this)
                // query.select('#navBar').boundingClientRect(data => {
                //     console.log(data.height, 'data.height--')// 这个就是距离顶部的高度
                //     this.tabHeight = data.height + 16 // 赋值，待会要用  navbar+手写tab的高度
                //     console.log(this.tabHeight, 'tabHeight')
                //     this.scrollMT = 'margin-top:' + (data.height + 10) + 'px'
                //     console.log(this.scrollMT, 'scrollMT')
                // }).exec()

            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
                this.scrollMT = 'margin-top:90px;'
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)
        },

        // 商品图片轮播图事件
        changeSwiper (e) {
            this.currentSwiperItem = e.detail.current // 指示点随着轮播图动
        },
        // 点击轮播图上指示点
        swiperDot (index) {
            // console.log(index,'index currentDot')
            this.currentSwiper = index // 轮播图随着指示点动
        },

        // 返回的箭头
        onClickLeft () {
            uni.navigateBack()
        },

        // 滑动时出现的tab
        changeTab (index, e) {
            this.currentIndex = index
            console.log(e, '090909', this.tabHeight, this.old.scrollTop, 'this.old.scrollTop')

            this.scrollTop = this.old.scrollTop

            if (index === 0) {
                this.$nextTick(function () {
                    this.isAnimated=true
                    this.isAnimatedJudge=false
                    this.isAnimatedDetail=false
                    this.scrollTop = 0
                })
            } else if (index === 1) {
                this.$nextTick(function () {
                    this.isAnimated=false
                    this.isAnimatedJudge=true
                    this.isAnimatedDetail=false
                    // this.scrollTop='579'
                    // 得出的top要减去 固定的tab的高度
                    this.scrollTop = this.listTop - this.tabHeight
                    console.log(this.scrollTop, 'ooo909090uiiu')
                })
            } else {
                this.$nextTick(function () {
                    this.isAnimated=false
                    this.isAnimatedJudge=false
                    this.isAnimatedDetail=true
                    this.scrollTop = this.detailTop - this.tabHeight
                })
            }
        },




        // 热卖轮播
        lookInfo (index, e, item) {
            this.swiperCurrent = index
            this.tabCurrent = 'tabNum' + index
            console.log(index, item, '组件', this.tabCurrent, 'tabCurrent++', this.swiperCurrent)
            // this.$emit('gradeSelect', index, item)
        },


        // // 评价轮播
        // lookInfo (index, e, item) {
        //     console.log(item,'item')
        //     this.swiperCurrent = index
        //     // this.tabCurrent = 'tabNum' + index
        //     console.log(index, item, '组件', this.tabCurrent, 'tabCurrent++', this.swiperCurrent)
        //     const params = {}
        //     params.judgeId = item.id
        //     uni.navigateTo({
        //         url:
        //             '/pages/userJudges/judgeDetail?params=' +
        //             encodeURIComponent(JSON.stringify(params))
        //     })
        // },

        // shanghuxinxi
        getMerchantDetailMethod () {
            return new Promise((resolve, reject) => {
                getMerchantDetailApi({merchantId:this.merchantId}).then(res => {
                    console.log(res, 'res')
                    if (res.code === 200) {
                        this.merchantInfo=res.data
                        this.merchantInfo.storeEnvImageList = res.data.storeEnvImage.split(',')
                        console.log(this.merchantInfo,'this.merchantInfo')
                        resolve()
                    } else {
                        Toast(res.msg)
                    }
                })
            })
        },

    }
}

</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}

.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;

}

.main {
    position: relative;
    // margin-bottom:36px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}

.tabBox {
    position: relative;
    margin-top: 90px;
    // border-bottom: 1px solid #E0E0E0;
}

.content-top {
    .tabs {
        margin-bottom: 12px;
        // 需修改 原来是20px
        padding-left: 10px;
        padding-right: 10px;
        height: 16px;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .white {

        .tab-item {
            font-size: 28rpx;
            // font-weight: bolder;
            color: #666666;
        }

        .tabbar-item {
            flex: auto;
            z-index: 1;
            text-align: center;

            &.active {
                font-style: normal;
                font-weight: bolder;
                font-size: 32rpx;
                line-height: 32rpx;
                color: #111111;
            }
        }
    }
}

.main-container {
    // position: absolute;
    background: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;

}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}

// 动画效果
.element_to_animate{
    transition: all 0.5s ease;
    animation-duration: 1s; /* 动画时长为1秒 */
    animation-timing-function: ease; /* 动画的时间函数，这里是缓动效果 */
}
.animate_class{
    transform: translateY(-20px);
}

.goodsImg {
    position: relative;
    width: 100%;
    height: 510rpx;

    .top_swiper {
        display: block;
        height: 510rpx;
    }

    img {
        width: 100%;
        height:510rpx;
    }
}

.swiper_item_num {
    position: absolute;
    bottom: 30rpx;
    right: 36rpx;
    border-radius: 25px;
    background: rgb(0, 0, 0, 0.5);
    padding-left: 12px;
    padding-right: 12px;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
}

.status_tips {
    position: absolute;
    width: 100%;
    height: 108rpx;
    line-height: 108rpx;
    background: rgb(240, 240, 240, 0.6);
    bottom: 0rpx;
    align-items: center;
    font-size: 28rpx;
    text-align: center;
    color: #666666;
}
.group_status_tips{
    position: absolute;
    width: 100%;
    height: 108rpx;
    line-height: 108rpx;
    background:#FF6203;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    text-align: center;
    color: #666666;

    .status_tips_left{
        padding-left: 48rpx;
        text-align: left;

        .joinPeopleNum{
            font-size: 24rpx;
            color: #ffffff;
            line-height: 24rpx;
        }
        .stopTimeTips{
            margin-top: 8rpx;
            font-size: 24rpx;
            color: #ffffff;
            font-weight: bolder;
            line-height: 24rpx;
        }
    }
    .status_tips_right{
        padding-right: 48rpx;
        font-size:24rpx;
        text{
            display: inline-block;
            width:38rpx;
            height: 38rpx;
            line-height: 38rpx;
            color: #FF6203;
            background-color: #ffffff;
            font-size:24rpx;
            text-align: center;
            border-radius: 2px;
        }
        span{
            color: #ffffff;
            margin-right: 10rpx;
            margin-left: 10rpx;
        }
    }
}
.pageInfo_top{
    padding: 33px 0px 25px 0px;
    margin: 0 48rpx;
    border-bottom: 1px solid #f0f0f0;
}
.goods_content {
    background: #ffffff;
    display: flex;
    align-items: center;
    .goodsPics{
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        img{
            width: 100%;
        }
    }
    .goodsInfo{
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        margin-left: 26rpx;
        width: calc(80% - 26rpx);

        .goodsInfo_name{
            font-size: 40rpx;
            text-align: left;
            color: #111111;
            width: 100%;
        }
        .goodsInfo_isSelfPoint{
            color: #FF6203;
            padding: 8rpx 14rpx;
            background-color:rgb(255, 98, 3, 0.06) ;
            font-size: 24rpx;
            border-radius: 20rpx;
            width: 80rpx;
            margin-top:26rpx;
        }
    }
}
.merchant_address{
    margin-top: 36rpx;
    font-size: 26rpx;
    color: #111111;
    display: flex;
    align-items: center;
}
.merchantInfo{
    // margin-top: 60rpx;
    padding: 0rpx 48rpx 0rpx 48rpx;

    .info{
        margin-top: 36rpx;
        font-size: 26rpx;
        color: #111111;
        display: flex;
        align-items: center;
    }
    .infoWrapper{
        padding-bottom: 60rpx;
        border-bottom: 1px solid #f0f0f0;
    }
}
.infoTitle{
    font-size: 36rpx;
    text-align: left;
    color: #111111;
}


// 店内环境
.instoreEnvironment {
    margin-top: 58rpx;
    padding: 0rpx 48rpx;

    .environmentPics_box {
        margin-top: 38rpx;
        position: relative;
    }
}

// 店内环境图片轮播组件
.top-menu-view {
    display: flex;
    // position: fixed;
    white-space: nowrap;
    width:100%;

    .merchantPicItem {
        display: inline-block;
        margin-right: 12px;
        position: relative;
    }
    // .merchantPicItem:last-child {
    //     // margin-right:16px;
    // }
}
.fixDiv {
    min-height: 226px;
    width: 10px;
    right: 0px;
    background: linear-gradient(270deg, #ffffff 25.52%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    z-index: 1;
}
.last-top-menu-view {
    width: calc(100% - 46px);
}
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}

// 商家服务
.merchant_services{
    margin-top: 58rpx;
    padding: 0rpx 48rpx;

    .services_content{
        margin-top: 38rpx;

        .contentInfo{
            font-size: 26rpx;
            text-align: left;
            color: #111111;
            margin-bottom: 26rpx;
        }
    }
}
.loading {
    text-align: center;
    margin-top: 16px;
    color: #242629;
    font-size: 28rpx;
}


.pl15 {
    padding-left: 15px;
}

.l20 {
    margin-left: 20px;
}
.r12{
    margin-right: 12px;
}
.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}

::v-deep .van-icon-arrow {
    color: #b3b3b3 !important;
}

::v-deep .van-info {
    background-color: #FF6203;
}
button{
    padding-left: 0rpx !important;
    padding-right: 0rpx !important;
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
}

::v-deep .van-hairline--bottom:after {
    border: none;
}

::v-deep .van-empty__image {
    width: 150px;
    height: 100px;

}


::v-deep .van-goods-action-button__inner {
    font-weight: normal !important;
}
::v-deep .van-goods-action-icon {
   min-width:35rpx !important;
}
::v-deep .van-goods-action, .van-goods-action--safe{
    padding-left: 24px !important;
    padding-right: 24px !important;
    width: calc(100% - 48px) !important;
    height: 144rpx !important;
    line-height: 144rpx !important;
    // background-color: paleturquoise !important;
    align-items: center !important;
    border-top: 1px solid #f9f9f9 !important;
}
.mt48{
    margin-top: 48rpx;
}
</style>
